<script lang="ts">
export default {
  name: 'Study7StuDemo2'
}
</script>

<template>
  <h2>生命周期函数-onUnmounted</h2>
  <div class="note">
    <p>应用场景：</p>
    <p>1. 清除计时器或定时任务：在组件卸载时清除 setInterval 或 setTimeout，避免计时器继续运行。</p>
    <p>2. 移除全局事件监听器或 WebSocket 连接：确保组件销毁时移除不再需要的监听器或关闭连接。</p>
    <p>3. 取消网络请求：在组件销毁时中断尚未完成的异步请求，避免组件销毁后更新状态。</p>
    <p>
      4. 关闭 WebSocket 连接或其他资源：在组件卸载时关闭连接或释放资源，避免资源浪费或潜在错误。
    </p>
  </div>

  <hr class="hr-style" />
  <h3>清除计时器</h3>
  <div class="group">
    <p>Time elapsed: {{ timeElapsed }} seconds</p>
  </div>

  <hr class="hr-style" />
  <h3>移除事件监听器</h3>
  <div class="group">
    <p>Resize the window and check the console for messages.</p>
  </div>

  <!-- <h3>取消网络请求</h3>
  <hr class="hr-style" />
  <div class="group">
    <p>Data: {{  data  }}</p>
  </div> -->

  <hr class="hr-style" />
  <h3>关闭 WebSocket 连接</h3>
  <div class="group">
    <p>WebSocket status: {{  status  }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
// import * as axios from 'axios'
// import { error, log } from 'echarts/types/src/util/log.js';

/**
 * 清除计时器
 * 1)场景说明: 在 onMounted 中启动一个每秒更新一次计时器，当组件销毁时，onUnmounted 清除该计时器，避免它在组件卸载后继续运行。
 */
const timeElapsed = ref(0)
let timer: number = 0

onMounted(() => {
  timer = setInterval(() => {
    timeElapsed.value++
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

/**
 * 移除事件监听器
 * 1)场景说明: 在组件挂载时，onMounted 注册了一个全局的窗口 resize 事件监听器，监听窗口大小的变化，并在控制台打印宽高信息。onUnmounted 保证在组件销毁时移除监听器，防止不必要的全局事件绑定。
 */
const handleResize = ()=>{
  console.log('window resized:',window.innerWidth,window.innerHeight);
}

onMounted(()=>{
  window.addEventListener('resize',handleResize)
})

onUnmounted(()=>{
  window.removeEventListener('resize',handleResize)
})

/**
 *  取消网络请求
 * 1)场景说明: 在组件卸载时，取消正在进行的网络请求，避免请求完成后试图更新已销毁的组件状态，导致潜在的内存泄漏或异常。
 */

//  const data = ref(null)
//     let cancelTokenSource: CancelTokenSource | null = null

//     onMounted(() => {
//       // 创建 Axios 取消令牌
//       cancelTokenSource = axios.CancelToken.source()

//       axios.get('https://jsonplaceholder.typicode.com/posts/1', {
//         cancelToken: cancelTokenSource.token
//       }).then(response => {
//         data.value = response.data
//       }).catch(error => {
//         if (axios.isCancel(error)) {
//           console.log('Request canceled:', error.message)
//         } else {
//           console.error('Error fetching data:', error)
//         }
//       })
//     })

//     onUnmounted(() => {
//       // 组件卸载时取消请求
//       if (cancelTokenSource) {
//         cancelTokenSource.cancel('Request canceled because the component was unmounted')
//       }
//     })

/**
 * 关闭 WebSocket 连接
 * 1)场景说明: 该组件在 onMounted 时连接到一个 WebSocket 服务器，并在 onUnmounted 时关闭连接，确保在组件销毁后不会继续维持无效的连接。
 */
const status = ref('Disconnected')
let socket = null

onMounted(()=>{
  // 创建 WebSocket 连接
  socket = new WebSocket('ws://1.15.128.171:8989/ws/test')

  socket.onopen = ()=>{
    status.value = 'connected'
  }

  socket.onclose = ()=>{
    status.value = 'Disconnected'
  }

  socket.onerror = (error)=>{
    console.log('WebSocket error:', error);
  }
})
</script>

<style scoped>
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
